import './css/index.css';
// 小图的盒子
let smallBox = document.querySelector('.smallBox');
// 小图
let smallImg = document.querySelector('.smallBox>img');
// 遮罩
let mask = document.querySelector('.mask');
// 大图
let bigImg = document.querySelector('.bigBox>img');
// 主盒子
let box = document.querySelector('.box');
// 多角度图列表
let liList = document.querySelectorAll('.selectImg>li');
// 记录上次点击的数字
let lastIndex = 0;

// 鼠标移动函数
function moveFn(e) {
  let afterMaskX = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
  let afterMaskY = e.pageY - mask.offsetHeight / 2;
  mask.style.left = `${afterMaskX}px`;
  mask.style.top = `${afterMaskY}px`;
  if (afterMaskX <= 0) {
    afterMaskX = 0;
  }
  if (afterMaskX >= smallBox.offsetWidth - mask.offsetWidth) {
    afterMaskX = smallBox.offsetWidth - mask.offsetWidth;
  }
  if (afterMaskY <= 0) {
    afterMaskY = 0;
  }
  if (afterMaskY >= smallBox.offsetHeight - mask.offsetHeight) {
    afterMaskY = smallBox.offsetHeight - mask.offsetHeight;
  }
  mask.style.left = `${afterMaskX}px`;
  mask.style.top = `${afterMaskY}px`;

  bigImg.style.transform = `translate(-${afterMaskX * 2}px,-${
    afterMaskY * 2
  }px)`;
}

smallBox.addEventListener('mousemove', moveFn);

// 列表点击事件
liList.forEach((el, index, arr) => {
  el.addEventListener('click', () => {
    arr[lastIndex].children[0].classList.remove('active');
    el.children[0].classList.add('active');
    smallImg.src = el.children[0].src;
    bigImg.src = el.children[0].src;
    lastIndex = index;
  });
});
